<!--
  @author heguanghua
  @since 2019/06/12 11:57
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common::confJscss"/>
<body>


<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-header layui-margin-b"><b>开通分类</b></div>

        <div th:replace="conf/workturn/servcategory/_tab::tab"></div>

        <div class="layui-card-body">
            <form method="POST" action="" class="layui-form" lay-filter="zmn-form">

                <input type="hidden" name="plat" th:value="${plat}"/>

                <div class="layui-tab layui-tab-brief" lay-filter="servCategId">
                    <ul class="layui-tab-title">
                        <li th:each="servCategory,state:${servCategorys}" th:text="${servCategory.value}" th:lay-id="${servCategory.key}" th:class="${state.index == 0 ? 'layui-this' : ''}"/>
                    </ul>
                    <div class="layui-tab-content">
                        <div th:each="servCategory,state:${servCategorys}" th:class="${state.index == 0 ? 'layui-tab-item layui-show' : 'layui-tab-item'}">
                            <div class="layui-card-body">
                                <div class="inline-block" style="float: left">
                                    <div class="zmn-2layer-list" th:each="oneCateg:${servCategory.children}">
                                        <div class="list-left" style="text-align: center">
                                            <div class="list-item" th:text="${oneCateg.value}"></div>
                                        </div>
                                        <div class="list-right">
                                            <div class="right-box">
                                                <div class="list-item">
                                                    <input type="checkbox" class="checkAll" lay-filter="checkAll" th:value="${servCategory.key + '-' + oneCateg.key}" title="全选">
                                                </div>
                                                <div class="list-item" th:each="categ:${oneCateg.children}" th:title="${categ.value}">
                                                    <input type="checkbox" lay-filter="checkOne" name="categoryId" th:class="${servCategory.key + '-' + oneCateg.key}" th:value="|${servCategory.key}-${oneCateg.key}-${categ.key}|"
                                                           th:checked="${#lists.contains(categIds, servCategory.key + '-' + oneCateg.key + '-' + categ.key)}" th:title="${categ.value}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item submit">
<!--                    th:if="${#authPermit.checkPermit('/plat/serv/category/saveServCategory.action')}"-->
                    <div class="layui-input-block" style="margin-left: 139px" >
                        <button class="layui-btn" lay-submit="" lay-filter="zmn-form-submit">提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                    </div>
                </div>
            </form>

            <div class="layui-card-header layui-margin-b" style="margin-left: -10px"><b>操作记录信息</b></div>

            <div th:replace="conf/workturn/servcategory/_table::table"></div>

        </div>

    </div>

</div>
</body>
</html>

<script type="text/javascript" th:inline="javascript">

    var json = {
        currentServCategId: [[${currentServCategId}]],
        items: [[${items}]]
    };

    layui.config({
        base: "/static/js/module/",
        version: version
    }).extend({
        oms_conf_serv_category: "conf/workturn/servcategory/zmn.oms.conf.serv.category",
    }).use(['oms_conf_serv_category']);

</script>

<style>
    .zmn-2layer-list {
        display: block;
        clear: both;
        overflow: hidden;
        margin: 2px 0;
        padding: 4px 0;
        border: solid 0px #e6e6e6;
        border-bottom-width: 0;
    }
    .zmn-2layer-list .list-item {
        position: relative;
        clear: both;
        display: inline-block;
        overflow: hidden;
        margin-left: 0;
        padding: 2px 0;
        height: 26px;
        font-size: 13px;
        vertical-align: bottom;
    }
    .zmn-2layer-list .list-left {
        float: left;
        position: relative;
        margin-right: -100px;
        padding: 0;
        width: 100px;
        text-align: right;
    }
    .zmn-2layer-list .list-right .right-box .list-item {
        width: 126px;
    }
    .zmn-2layer-list .list-right {
        float: right;
        width: 100%;
    }
    .zmn-2layer-list .list-right:nth-child(2) .right-box {
        border-top: solid 0 #fff;
    }
    .zmn-2layer-list .list-right .right-box {
        display: block;
        overflow: hidden;
        margin-left: 110px;
        border-top: solid 1px #e6e6e6;
    }
    .zmn-2layer-list .list-item .layui-form-checkbox {
        top: 0;
        display: inline-block;
        overflow: hidden !important;
        margin: 0 5px;
        height: 24px;
        font-size: 0;
        line-height: 23px;
    }
    .zmn-2layer-list .list-item .layui-form-checkbox span {
        display: inline-block;
        overflow: hidden;
        padding: 1px 7px;
        height: 22px;
        width: 72px;
        font-size: 12px;
        line-height: 22px;
        text-align: center;
    }
    .zmn-2layer-list .list-item .layui-form-checkbox i {
        top: 0;
        right: 3px;
        display: inline-block;
        overflow: hidden;
        width: 26px;
        height: 22px;
        font-size: 18px;
        line-height: 22px;
    }
    .zmn-2layer-list .list-item .layui-form-checked i, .zmn-2layer-list .list-item .layui-form-checked:hover i {
        border-color: #5FB878;
    }
</style>
